<template>
<div class="showpic j-flag">
  <div class="btns">
    <a href="javascript:;" class="s-fc3" @click.stop="data.flag = false"
      ><i class="icn u-dicn u-dicn-18"></i>收起</a
    >
    <span class="line">|</span>
    <a href="javascript:;" class="s-fc3"
      ><i class="icn u-dicn u-dicn-30"></i>查看原图</a
    >
    <span class="line">|</span>
    <a href="javascript:;" class="s-fc3"
      ><i class="icn u-dicn u-dicn-31"></i>下载</a
    >
  </div>
  <div class="slide f-sltnone f-pr">
    <div :class="['wrap' , {'f-cursml' : icon_status == 1} , {'f-curleft' :icon_status == 0 } , {'f-curright':icon_status == 2}]" @mousemove="move">
      <img :src="data.pics[data.index].originUrl+'?param=525x10000'" alt="" @click.stop="imgOption">
    </div>
  </div>
</div>
</template>
<script>
export default {
  props:['data'],
  data() {
    return {
       icon_status:1,  //0表示左边图标  1放大图标 2右边图标
       img_index:this.data.index
    }
  },
  methods:{
    move(e){
        if(e.offsetX < 175 && this.data.index-1 >= 0){
           this.icon_status = 0
        }else{
           this.icon_status = 1
        }
         if(e.offsetX > 350 && this.data.index+1 <= this.data.pics.length -1  ){
           this.icon_status = 2
        }
    },
    imgOption(){
       if(this.icon_status == 2){
         if(this.data.index >= this.data.pics.length -1){
           return
         }
         this.data.index++
      }
       if(this.icon_status == 1){
        this.data.flag = false
      }
       if(this.icon_status == 0){
         if(this.data.index <= 0){
           return
         }
         this.data.index--
      }
    },
  },
}
</script>